<template>
	<el-container>
		<el-container>
			<el-header>
				<el-page-header content="编辑数据表" @back="$router.back()"/>
			</el-header>
			<el-main style="background: #ffffff">
				<el-form :model="form" :rules="rules" :disabled="mode == 'show'" ref="dialogForm" label-width="110px" label-position="right">
					<el-tabs v-model="activeName">
						<el-tab-pane label="基础信息" name="base">
							<el-form-item label="表名称" prop="table_name">
								<el-input v-model="form.table_name" placeholder="请输入表名称" clearable/>
							</el-form-item>
							<el-form-item label="表描述" prop="table_comment">
								<el-input v-model="form.table_comment" placeholder="请输入表描述" clearable/>
							</el-form-item>
							<el-form-item label="作者">
								<el-input v-model="form.author" clearable/>
							</el-form-item>
							<el-form-item label="备注">
								<el-input v-model="form.remark" class="w-full" type="textarea" :autosize="{ minRows: 4, maxRows: 4 }" maxlength="200" show-word-limit clearable/>
							</el-form-item>
						</el-tab-pane>
						<el-tab-pane label="字段管理" name="column">
							<el-table :data="form.table_column">
								<el-table-column label="字段列名" prop="column_name"/>
								<el-table-column label="字段描述" prop="column_comment" min-width="120">
									<template #default="scope">
										<el-input v-model="scope.row.column_comment" clearable/>
									</template>
								</el-table-column>
								<el-table-column label="物理类型" prop="column_type"/>
								<el-table-column label="必填" width="80">
									<template #default="scope">
										<el-checkbox v-model="scope.row.is_required" :true-label="1" :false-label="0"/>
									</template>
								</el-table-column>
								<el-table-column label="插入" width="80">
									<template #default="scope">
										<el-checkbox v-model="scope.row.is_insert" :true-label="1" :false-label="0"/>
									</template>
								</el-table-column>
								<el-table-column label="编辑" width="80">
									<template #default="scope">
										<el-checkbox v-model="scope.row.is_update" :true-label="1" :false-label="0"/>
									</template>
								</el-table-column>
								<el-table-column label="列表" width="80">
									<template #default="scope">
										<el-checkbox v-model="scope.row.is_lists" :true-label="1" :false-label="0"/>
									</template>
								</el-table-column>
								<el-table-column label="查询" width="80">
									<template #default="scope">
										<el-checkbox v-model="scope.row.is_query" :true-label="1" :false-label="0"/>
									</template>
								</el-table-column>
								<el-table-column label="查询方式">
									<template #default="scope">
										<el-select v-model="scope.row.query_type">
											<el-option label="=" value="="/>
											<el-option label="!=" value="!="/>
											<el-option label=">" value=">"/>
											<el-option label=">=" value=">="/>
											<el-option label="<" value="<"/>
											<el-option label="<=" value="<="/>
											<el-option label="LIKE" value="like"/>
											<el-option label="BETWEEN" value="between"/>
										</el-select>
									</template>
								</el-table-column>
								<el-table-column label="显示类型" min-width="120">
									<template #default="scope">
										<el-select v-model="scope.row.view_type">
											<el-option label="文本框" value="input"/>
											<el-option label="文本域" value="textarea"/>
											<el-option label="下拉框" value="select"/>
											<el-option label="单选框" value="radio"/>
											<el-option label="复选框" value="checkbox"/>
											<el-option label="日期控件" value="datetime"/>
											<el-option label="图片选择控件" value="imageSelect"/>
											<el-option label="富文本控件" value="editor"/>
										</el-select>
									</template>
								</el-table-column>
								<el-table-column label="字典类型" min-width="120">
									<template #default="scope">
										<el-select v-model="scope.row.dict_type" clearable :disabled="!(scope.row.view_type == 'select' || scope.row.view_type == 'radio' || scope.row.view_type == 'checkbox')" placeholder="字典类型">
											<el-option v-for="(item, index) in dict_type" :key="index" :label="item.name" :value="item.type" :disabled="!item.status"/>
										</el-select>
									</template>
								</el-table-column>
							</el-table>
						</el-tab-pane>
						<el-tab-pane label="生成配置" name="config">
							<el-form-item label="模板类型" prop="template_type">
								<el-radio-group v-model="form.template_type">
									<el-radio :label="0">单表（curd）</el-radio>
									<el-radio :label="1">树表（curd）</el-radio>
								</el-radio-group>
							</el-form-item>
							<el-form-item label="删除类型" prop="delete.type">
								<el-radio-group v-model="form.delete.type">
									<el-radio :label="0">物理删除</el-radio>
									<el-radio :label="1">软删除</el-radio>
								</el-radio-group>
							</el-form-item>
							<el-form-item label="删除字段" prop="delete.name" v-if="form.delete.type == 1">
								<el-select class="w-80" v-model="form.delete.name" clearable>
									<el-option v-for="item in form.table_column" :key="item.id" :value="item.column_name" :label="`${item.column_name}：${item.column_comment}`"/>
								</el-select>
							</el-form-item>
							<template v-if="form.template_type == 1">
								<el-form-item label="树表ID" prop="treePrimary">
									<div>
										<el-select class="w-80" v-model="form.tree.tree_id" clearable>
											<el-option v-for="item in form.table_column" :key="item.id" :value="item.column_name" :label="`${item.column_name}：${item.column_comment}`"/>
										</el-select>
										<div class="form-tips">指定树表的主要ID，一般为主键</div>
									</div>
								</el-form-item>
								<el-form-item label="树表父ID" prop="treeParent">
									<div>
										<el-select v-model="form.tree.tree_pid" clearable>
											<el-option v-for="item in form.table_column" :key="item.id" :value="item.column_name" :label="`${item.column_name}：${item.column_comment}`"/>
										</el-select>
										<div class="form-tips">指定树表的父ID，比如：parent_id</div>
									</div>
								</el-form-item>
								<el-form-item label="树名称" prop="treeName">
									<el-select v-model="form.tree.tree_name" clearable>
										<el-option v-for="item in form.table_column" :key="item.id" :value="item.column_name" :label="`${item.column_name}：${item.column_comment}`"/>
									</el-select>
								</el-form-item>
							</template>
							<el-form-item label="类描述">
								<div>
									<div>
										<el-input v-model="form.class_comment" placeholder="请输入文件描述" clearable/>
									</div>
									<div class="form-tips">
										<div>
											例：填写test,生成文件描述为test控制器(test逻辑/test模型)
										</div>
									</div>
								</div>
							</el-form-item>

							<el-form-item label="生成方式" prop="generate_type">
								<el-radio-group v-model="generate_type">
									<el-radio :label="0">压缩包下载</el-radio>
									<el-radio :label="1">生成到模块</el-radio>
								</el-radio-group>
							</el-form-item>
							<el-form-item label="模块名" prop="module_name">
								<div>
									<el-input v-model="form.module_name" placeholder="请输入模块名" clearable/>
									<div class="form-tips">生成文件所在模块</div>
								</div>
							</el-form-item>
							<el-form-item label="类目录">
								<div>
									<div>
										<el-input v-model="form.class_dir" placeholder="请输入文件所在目录" clearable/>
									</div>
									<div class="form-tips">
										<div>
											例：填写test,则在app/模块名/controller/test下生成控制器
										</div>
									</div>
								</div>
							</el-form-item>

							<el-form-item label="父级菜单" prop="menu.pid">
								<el-tree-select class="w-80" v-model="form.menu.pid" :data="menu" clearable node-key="id" :props="{label: 'name'}" default-expand-all placeholder="请选择父级菜单" check-strictly/>
							</el-form-item>
							<el-form-item label="菜单名称" prop="menu.name">
								<div class="w-80">
									<el-input v-model="form.menu.name" placeholder="请输入菜单名称" clearable/>
								</div>
							</el-form-item>
							<el-form-item label="菜单构建" prop="menu.type" required>
								<div>
									<el-radio-group v-model="form.menu.type">
										<el-radio :label="1">自动构建</el-radio>
										<el-radio :label="0">手动添加</el-radio>
									</el-radio-group>
									<div class="form-tips">
										自动构建：自动执行生成菜单sql。手动添加：自行添加菜单。
									</div>
								</div>
							</el-form-item>
						</el-tab-pane>
						<el-tab-pane label="关联配置" name="relations">
							<el-button type="primary" @click="showEditPopup('add')">
								<template #icon>
									<icon name="el-icon-Plus"/>
								</template>
								新增关联
							</el-button>
							<div class="mt-4">
								<el-table :data="form.relations" size="mini">
									<el-table-column prop="type" label="关联类型">
										<template #default="scope">
											<dict-value :value="scope.row.type" :options="relationTypes"/>
										</template>
									</el-table-column>
									<el-table-column prop="name" label="关联名称"/>
									<el-table-column prop="model" label="关联模型"/>
									<el-table-column prop="local_key" label="关联键">
										<template #default="scope">
											<dict-value :value="scope.row.local_key" :options="form.table_column" :config="{label: 'column_comment',value: 'column_name'}"/>
										</template>
									</el-table-column>
									<el-table-column prop="foreign_key" label="外键"/>
									<el-table-column label="操作">
										<template #default="{ row, $index }">
											<el-button link type="primary" @click="showEditPopup('edit', row, $index)">
												编辑
											</el-button>
											<el-button link type="danger" @click="handelDelete($index)">
												删除
											</el-button>
										</template>
									</el-table-column>
								</el-table>
								<relations-add :column="form.table_column" :types="relationTypes" v-if="showEdit" ref="editRef" @add="handleAdd" @edit="handleEdit" @close="showEdit = false"/>
							</div>
						</el-tab-pane>
					</el-tabs>
				</el-form>
			</el-main>
			<el-footer class="!border-none" shadow="never" style="text-align: center">
				<el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
			</el-footer>
		</el-container>
	</el-container>
	<relations-add v-if="relationsAddDialog.save" :types="relationTypes" :column="form.table_column" ref="saveRelationsAddDialog" @add="handleAdd" @edit="handleEdit" @closed="relationsAddDialog.save = false"></relations-add>

</template>

<script>
import relationsAdd from "./list/relations-add.vue";

export default {
	components: {
		relationsAdd
	},
	emits: ['success', 'closed'],
	data() {
		return {
			mode: "edit",
			relationsAddDialog: {
				save: false,
			},
			titleMap: {
				edit: '编辑规则',
			},
			visible: false,
			isSaveing: false,
			showEdit: false,
			//表单数据
			form: {
				id: '',
				table_name: '',
				table_comment: '',
				author: '',
				remark: '',
				template_type: 0,
				generate_type: 0,
				module_name: '',
				class_dir: '',
				class_comment: '',
				table_column: [],
				menu: {
					pid: '',
					name: '',
					type: 0
				},
				tree: {
					tree_id: 0,
					tree_pid: 0,
					tree_name: 0
				},
				delete: {
					name: '',
					type: 0
				},
				relations: []
			},
			//验证规则
			rules: {
				table_name: [{required: true, message: '请输入表名称'}],
				table_comment: [{required: true, message: '请输入表描述'}],
				module_name: [{required: true, message: '请输入模块名'}],
				generate_type: [{required: true, trigger: 'change'}],
				template_type: [{required: true, trigger: 'change'}],
				['menu.pid']: [{required: true, message: '请选择父级菜单'}],
				['menu.name']: [{required: true, message: '请输入菜单名称'}],
				['delete.type']: [{required: true, trigger: 'change'}],
				['delete.name']: [{required: true, message: '请选择删除字段'}]
			},
			activeName: 'column',
			editIndex: 0,
			menu: [],
			dict_type: [],
			dialog3: false,
			generate_type: 0,
			relationTypes: [
				{
					name: '一对一',
					value: 'has_one'
				},
				{
					name: '一对多',
					value: 'has_many'
				}
			]
		}
	},
	watch: {
		generate_type(val) {
			if (val == 1) {
				this.$confirm('生成到模块方式如遇同名文件会覆盖旧文件，确定要选择此方式吗？', '提示', {
					type: 'warning'
				}).then(() => {
					this.form.generate_type = val
				}).catch(() => {
					this.form.generate_type = 0
					this.generate_type = 0
				})
			}
		}
	},
	mounted() {
		this.menu_list()
		this.dictTypeAll()
		this.getDetails()
	},
	methods: {
		//显示
		open(mode = 'add') {
			this.mode = mode;
			this.visible = true;
			return this
		},
		showEditPopup(type, data, index) {
			this.relationsAddDialog.save = true;
			this.$nextTick(() => {
				if (data && index !== undefined) {
					this.editIndex = index
				}
				this.$refs.saveRelationsAddDialog.open(type);
			});
		},
		handleAdd(data) {
			this.form.relations.push(data)
			this.relationsAddDialog.save = false
		},
		handleEdit(data) {
			this.form.relations.splice(this.editIndex, 1, data)
			this.relationsAddDialog.save = false;
		},
		//加载树数据
		//表单提交方法
		submit() {
			this.$refs.dialogForm.validate(async (valid) => {
				if (valid) {
					this.isSaveing = true;
					var res = await this.$API.dev_tools.code.generateEdit.post(this.form);
					this.isSaveing = false;
					if (res.code == 1) {
						this.$emit('success', this.form, this.mode)
						this.visible = false;
						this.$message.success("操作成功")
					} else {
						this.$alert(res.message, "提示", {type: 'error'})
					}
				} else {
					return false;
				}
			})
		},
		//表单注入数据
		setData(data) {
			this.form.id = data.id
			this.form.name = data.name
			this.form.type = data.type
			this.form.status = data.status
			this.form.remark = data.remark
			//可以和上面一样单个注入，也可以像下面一样直接合并进去
			//Object.assign(this.form, data)
		},
		async menu_list() {
			var res = await this.$API.system.menu.all.get();
			if (res.code == 1) {
				this.menu = res.data
			}
		},
		async dictTypeAll() {
			var res = await this.$API.dev_tools.dict_type.all.get();
			if (res.code == 1) {
				this.dict_type = res.data
			}
		},
		async getDetails() {
			var res = await this.$API.dev_tools.code.tableDetail.get({id: Number(this.$route.query.id)});
			if (res.code == 1) {
				Object.keys(this.form).forEach((key) => {
					//@ts-ignore
					this.form[key] = res.data[key]
				})
			}
		},
	}
}
</script>

<style></style>
